<template>
    <header>
        <nav>
            <ul>
                <li><a href="/">首页</a></li>
                <li><a href="/">HTML/CSS</a></li>
                <li><a href="/resource/view/js/">JavaScript</a></li>
                <li><a href="/resource/view/game/">Game</a></li>
                <li class="login"><a href="/">Login</a></li>
            </ul>
        </nav>
    </header>
</template>

<script>
//    const app = {
//      install: function(){
//          Vue.component("app", App)
//      }
//    };
    export default {
        data () {
            return {
                msg: 'I`m template'
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    body header {
        overflow: hidden;
        background: -webkit-linear-gradient(top, #c6dde4, #fefeff);
        background: -moz-linear-gradient(top, #c6dde4, #fefeff);
        background: -o-linear-gradient(top, #c6dde4, #fefeff);
        background: -ms-linear-gradient(top, #c6dde4, #fefeff);
        background: linear-gradient(to bottom, #c6dde4, #fefeff);
    }
    header nav {
        position: relative;
        z-index: 20;
        display: block;
        padding: 0;
        background-color: #fff;
        border: 0 solid #c0c8cb;
        border-width: .1rem 0;
    }
    header nav ul {
        position: relative;
        z-index: 2;
        max-width: 99rem;
        margin: 0 auto;
        padding: 0;
        list-style: none;
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: box;
        display: flex;
        line-height: 0;
    }
    header nav ul li {
        display: inline;
    }
    header nav ul li > a {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        padding: 1.8rem;
        color: #40444f;
        line-height: 1.5rem;
        font-family: "OpenSans",sans-serif;
        font-size: 1.5rem;
        text-transform: uppercase;
        background-color: transparent;
        -webkit-transition: background-color 0.15s ease-out;
        -moz-transition: background-color 0.15s ease-out;
        -o-transition: background-color 0.15s ease-out;
        -ms-transition: background-color 0.15s ease-out;
        transition: background-color 0.15s ease-out;
    }
    header nav ul li > a:hover {
        text-decoration: none;
        background-color: #ededed;
    }
    header nav ul li.login {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -o-box-flex: 1;
        -ms-box-flex: 1;
        box-flex: 1;
        -webkit-flex-grow: 1;
        flex-grow: 1;
        text-align: right;
    }
</style>